<template>
    <div>
        <el-card>
             <div slot="header" class="clearfix">
                <span>新增接口</span>
             </div>
             <el-tabs type="border-card">
                    <el-tab-pane label="基础信息">
                        <el-form :model="form">
                            <el-row>
                              <el-col :span="6">
                                   <el-form-item label="所属服务" required label-width="120px"> 
                                       <el-input size="small" placeholder="所属服务"></el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                             <el-row>
                              <el-col :span="24">
                                   <el-form-item label="接口描述" required label-width="120px"> 
                                       <el-input size="small" placeholder="请输入接口描述，如用户详情接口" v-model="form.name"></el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="6">
                                  <el-form-item label="请求方法" required label-width="120px">
                                        <el-select v-model="form.value" placeholder="请选择" size="small">
                                                <el-option
                                                    label="AUTO"
                                                    value="AUTO">
                                                </el-option>
                                                <el-option
                                                    label="GET"
                                                    value="GET">
                                                </el-option>
                                                <el-option
                                                    label="POST"
                                                    value="POST">
                                                </el-option>
                                                <el-option
                                                    label="PUT"
                                                    value="PUT">
                                                </el-option>
                                                <el-option
                                                    label="DELETE"
                                                    value="DELETE">
                                                </el-option>
                                                <el-option
                                                    label="PATCH"
                                                    value="PATCH">
                                                </el-option>
                                                <el-option
                                                    label="HEAD"
                                                    value="HEAD">
                                                </el-option>
                                                <el-option
                                                    label="OPTIONS"
                                                    value="OPTIONS">
                                                </el-option>
                                                <el-option
                                                    label="TRACE"
                                                    value="TRACE">
                                                </el-option>
                                        </el-select>
                                   </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="24">
                                   <el-form-item label="路径" required label-width="120px"> 
                                       <el-input size="small" placeholder="请输入接口路径（例：/member/getMebInfo）"></el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="24">
                                   <el-form-item label="开发人员" label-width="120px"> 
                                       <el-input size="small" placeholder="请输入开发人员"></el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="24">
                                   <el-form-item label="备注" label-width="120px"> 
                                       <el-input size="small" type="textarea" rows="3" placeholder="请输入开发人员"></el-input>
                                    </el-form-item>
                              </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="配置输入">
                          <el-tabs v-model="activeName" @tab-click="handleClick">
                                <el-tab-pane label="请求头" name="first">请求头</el-tab-pane>
                                <el-tab-pane label="请求体" name="second">
                                     <el-table :data="requestData" border style="width: 100%" size="small">
                                        <template slot="empty">
                                            <el-empty>
                                                 <el-button type="primary" @click="handleRequestAdd">新增数据</el-button>
                                            </el-empty>
                                        </template>
                                        <el-table-column prop="date" label="参数名">
                                            <template slot-scope="scope">
                                                <input type="text" v-model="scope.row.date" v-show="scope.row.iseditor" />
                                                <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
                                            </template>
                                        </el-table-column>
                                         <el-table-column prop="date" label="必填" width="80">
                                            <template slot-scope="scope">
                                                <input type="text" v-model="scope.row.date" v-show="scope.row.iseditor" />
                                                <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
                                            </template>
                                        </el-table-column>
                                         <el-table-column prop="date" label="中文标题">
                                            <template slot-scope="scope">
                                                <input type="text" v-model="scope.row.date" v-show="scope.row.iseditor" />
                                                <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
                                            </template>
                                        </el-table-column>
                                         <el-table-column prop="date" label="英文标题">
                                            <template slot-scope="scope">
                                                <input type="text" v-model="scope.row.date" v-show="scope.row.iseditor" />
                                                <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
                                            </template>
                                        </el-table-column>
                                         <el-table-column prop="date" label="说明">
                                            <template slot-scope="scope">
                                                <input type="text" v-model="scope.row.date" v-show="scope.row.iseditor" />
                                                <span v-show="!scope.row.iseditor">{{scope.row.date}}</span>
                                            </template>
                                        </el-table-column>
                                         <el-table-column label="操作" width="180">
                                            <template slot-scope="scope">
                                                <el-button type="warning" @click="edit(scope.row, scope)">编辑</el-button>
                                                <el-button type="danger" @click="save(scope.row)">保存</el-button>
                                            </template>
                                         </el-table-column>                                        
                                      </el-table>
                                </el-tab-pane>
                                <el-tab-pane label="Query参数" name="third">Query参数</el-tab-pane>
                                <el-tab-pane label="脚本体验" name="fourth">脚本体验</el-tab-pane>
                                <el-tab-pane label="语言配置" name="fifth">语言配置</el-tab-pane>
                            </el-tabs>
                    </el-tab-pane>
                    <el-tab-pane label="配置步骤">
                        <el-row>
                          <el-col :span="2">
                              <el-button type="primary" icon="el-icon-plus" size="small" @click="addTab(editableTabsValue)">添加步骤</el-button>
                          </el-col>
                          <el-col :span="8" style="font-size: 13px;line-height: 28px">
                              注意：可拖拽步骤进行排序, 网关从左到右依次执行步骤
                          </el-col>
                        </el-row>
                        <el-row :gutter="10">
                            <el-col :span="6">
                                <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
                                    <el-tab-pane
                                        v-for="(item, index) in editableTabs"
                                        :key="item.name"
                                        :label="item.title"
                                        :name="item.name"
                                    >
                                        <el-row>
                                          <el-col :span="6">
                                              <el-checkbox v-model="checked">是否完成此步骤后结束</el-checkbox>
                                          </el-col>
                                        </el-row>
                                        <el-row>
                                          <el-col :span="4">添加组件</el-col>
                                          <el-col :span="12">
                                              <el-select v-model="value" placeholder="请选择" size="mini">
                                                <el-option label="判断条件" value="1"></el-option>
                                                <el-option label="循环条件" value="1"></el-option>
                                            </el-select>
                                          </el-col>
                                        </el-row>
                                    </el-tab-pane>
                                </el-tabs>
                             </el-col>
                        </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="配置输出">
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="响应体">
                                <el-row :gutter="20">
                                  <el-col :span="6">
                                      <span>内容类型 &nbsp;&nbsp;&nbsp;</span>
                                      <el-radio-group v-model="form.test">
                                        <el-radio :label="1">JSON</el-radio>
                                        <el-radio :label="0">XML</el-radio>
                                      </el-radio-group>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="4">
                                      <el-button type="primary" size="small">添加</el-button>
                                  </el-col>
                                </el-row>
                                <el-row>
                                  <el-col :span="5">
                                  </el-col>
                                </el-row>
                            </el-tab-pane>
                            <el-tab-pane label="响应体">响应头</el-tab-pane>
                            <el-tab-pane label="响应体">脚本</el-tab-pane>
                        </el-tabs>
                    </el-tab-pane>
                     <el-tab-pane label="校验结果">校验结果</el-tab-pane>
              </el-tabs>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: 'ApiDetail',
        data() {
            return {
                form: {},
                tableData: [],
                editableTabsValue: '0',
                editableTabs: [],
                tabIndex: 0,
                requestData: []
            }
        },
        methods: {
             addTab() {
                let newTabName = ++this.tabIndex + '';
                this.editableTabs.push({
                title: 'step'+newTabName,
                name: newTabName,
                content: 'New Tab content'
                });
                this.editableTabsValue = newTabName;
           },
            removeTab(targetName) {
                let tabs = this.editableTabs;
                let activeName = this.editableTabsValue;
                if (activeName === targetName) {
                tabs.forEach((tab, index) => {
                    if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    }
                    }
                });
                }
                
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },
            // 新增数据
            handleRequestAdd() {}
        }
    }
</script>

<style lang="scss" scoped>

</style>